<template>
	<view>
		<view v-for="(item , index) in pageInfos" @click="gotoPages(item.id)" :key=index>
			<view class="u-m-b-30 u-m-30 u-p-t-50 u-p-b-30" style="border-radius: 10rpx;box-shadow: 0 8px 15px 0 rgb(0 0 0/14%),0 17px 50px 0 rgb(0 0 0/19%);">
			<u-lazy-load :image="item.imageAddress" img-mode="widthFix" error-img="../static/loading_error.jpg" height="150" />
			<view class="u-p-t-20 u-text-center" style=" font-size: 40rpx;font-weight: 700">{{item.title}}</view>
			<view class="u-p-l-30 u-p-t-20">{{item.description}}</view>
			<view class="u-p-l-30 u-p-t-20">
				<text class="iconfont icon-a-icon_CatalogueClassification u-p-r-10"></text>{{item.name}}
				<text class="iconfont icon-date u-p-l-30 u-p-r-10"></text>{{item.updateDate}}
			</view>
			<view class="u-p-l-30 u-p-t-20">
				<u-icon name="tags" class="u-p-r-10"></u-icon> 
				<!-- 显示标签，用一个for循环来遍历 -->
				<u-tag v-for="(tag,count) in item.tagsName"  :key=count size="mini" :bg-color="tag.color" color="white" :border-color="tag.color" :text="tag.name"></u-tag>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['pageInfos'],
		methods:{
			gotoPages(id) {
				this.$u.route({
					url: 'pages/pages/pages',
					params: {
						id: id
					}
				})
			}
		}
	}
</script>

<style>
</style>
